<script setup lang="ts">
import type { Polygon } from 'geojson'
import { meter2MetricStr, notify } from '@/widgets'
import { lngLat2str } from '@/geom/great-circle'
import { type AuxSector } from './core'
import { getAuxGraphicGeometry } from '../core'
import { stringifyCoordinates } from '@/geom/geometry'
const props = defineProps<{ item: AuxSector }>()
async function copyPolygon() {
  const g = getAuxGraphicGeometry<Polygon>(props.item.id)
  if (!g) {
    notify.error({ content: '没有几何信息' })
    return
  }
  await navigator.clipboard.writeText(stringifyCoordinates(g.coordinates[0]))
  notify.success({ content: `[${props.item.name}]经纬度复制到剪贴板` })
}
</script>
<template>
  <div class="aux-sector-info pane-block">
    <div class="row">
      <div class="col-4em">名称</div>
      <div class="col">{{ item.name }}</div>
    </div>
    <div class="row">
      <div class="col-4em">圆心</div>
      <div class="col">{{ lngLat2str(item.center) }}</div>
    </div>
    <div class="row">
      <div class="col-4em">半径</div>
      <div class="col">{{ meter2MetricStr(item.radius) }}</div>
    </div>
    <div class="row">
      <div class="col-4em">起始方位</div>
      <div class="col">{{ Math.floor(item.bearing1 * 100.0) / 100.0 }}°</div>
    </div>
    <div class="row">
      <div class="col-4em">结束方位</div>
      <div class="col">{{ Math.floor(item.bearing2 * 100.0) / 100.0 }}°</div>
    </div>
    <div class="row" style="margin-top: 4em">
      <div class="map-hover" @click="copyPolygon">[复制]</div>
    </div>
  </div>
</template>
